<template>
  <div id="detail-room-list" class="room-list room-list-ctrip">
    <h2 class="o-module-tit">房型</h2>
    <RoomList :baseRoomsInfo="baseRoomsInfo1"></RoomList>
    <RoomList :baseRoomsInfo="baseRoomsInfo2"></RoomList>
    <RoomList :baseRoomsInfo="baseRoomsInfo3"></RoomList>
    <RoomList :baseRoomsInfo="baseRoomsInfo4"></RoomList>
    <RoomList :baseRoomsInfo="baseRoomsInfo5"></RoomList>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import randomNumber from '@/utils/randomNumber'
import RoomList from '@/components/RoomList.vue'
export default {
  name: 'HotelDetailRoomList',
  components: {
    RoomList
  },
  data() {
    return {
      baseRoomsName: []
    }
  },
  methods: {
    toPay() {
      this.$router.push('/pay')
    },
    num(a, b) {
      // console.log(222,randomNumber(a, b))
      return randomNumber(a, b)
    }
  },
  computed: {
    ...mapState({
      baseName: state => {
        return state.detail.baseName
      },
      baseNameLength: state => {
        return state.detail.baseName.length
      },
      baseRoomsInfo1: state => {
        return state.detail.baseRoomsInfo1
      },
      baseRoomsInfo2: state => {
        return state.detail.baseRoomsInfo2
      },
      baseRoomsInfo3: state => {
        return state.detail.baseRoomsInfo3
      },
      baseRoomsInfo4: state => {
        return state.detail.baseRoomsInfo4
      },
      baseRoomsInfo5: state => {
        return state.detail.baseRoomsInfo5
      }
    })
  },
  mounted() {
    let nums = this.num(this.baseName.length - 6, 0)
    this.baseRoomsName = this.baseName.slice(nums, nums + 5)
    for (let i = 0; i < 5; i++) {
      let name = this.baseRoomsName[i].base_room_name
      this.$store.dispatch('getBaseRoomsInfo', { name, i })
    }
  }
}
</script>

<style lang="scss" scoped>
.room-list {
  margin-top: 10px;
  h2 {
    color: #0f294d;
    font-size: 20px;
    background-color: #fff;
    padding: 10px 0 10px 20px;
  }
}
</style>